<template>
  <div class="dataScreen-container">
    <div class="dataScreen" ref="dataScreenRef">
      <div class="dataScreen-header">
        <div class="header-lf">
          <span class="header-screening" @click="router.push(HOME_URL)">首页</span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>档案管理系统</span>
            <!-- <div class="header-ct-warning">平台高峰预警信息（2条）</div> -->
          </div>
        </div>
        <div class="header-rg">
          <span class="header-download">统计报告</span>
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>今日在线人数</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <RealTimeAccessChart ref="RealTimeAccessRef" />
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>保管期限统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <BGQXStatisticChart ref="BGQXStatisticRef" />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>档案分类统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <ArchivesClassChart ref="ArchivesClassRef" />
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="dataScreen-map">
            <div class="dataScreen-map-title">全国档案实时统计</div>
            <mapChart ref="MapChartRef" />
          </div>
          <div class="dataScreen-cb">
            <div class="dataScreen-main-title">
              <span>未来30天访问量趋势图</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <OverNext30Chart ref="OverNext30Ref" />
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>归档排行统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <ArchiveRankChart ref="ArchiveRankRef" />
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>利用人次统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <UsePersonChart ref="UsePersonRef" />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>库房使用比例</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <!-- chart区域 -->
            <div class="dataScreen-main-chart">
              <HouseUseChart ref="HouseUseRef" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { ref, Ref, onMounted, onBeforeUnmount } from "vue";
import { HOME_URL } from "@/config";
import { randomNum } from "@/utils";
import { useRouter } from "vue-router";
import { useTime } from "@/hooks/useTime";
import { ECharts } from "echarts";
import mapChart from "./components/chinaMapChart.vue";
import ArchivesClassChart from "./components/ArchivesClassChart.vue";
import UsePersonChart from "./components/UsePersonChart.vue";
import ArchiveRankChart from "./components/ArchiveRankChart.vue";
import BGQXStatisticChart from "./components/BGQXStatisticChart.vue";
import OverNext30Chart from "./components/OverNext30Chart.vue";
import HouseUseChart from "./components/HouseUseChart.vue";
import RealTimeAccessChart from "./components/RealTimeAccessChart.vue";

const router = useRouter();
const dataScreenRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  // 初始化 echarts
  initCharts();
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
});

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
  // 使用了 scale 的echarts其实不需要需要重新计算缩放比例
  Object.values(dataScreen).forEach(chart => {
    chart && chart.resize();
  });
};

// 声明echarts实例
interface ChartProps {
  [key: string]: ECharts | null;
}
const dataScreen: ChartProps = {
  chart1: null,
  chart2: null,
  chart3: null,
  chart4: null,
  chart5: null,
  chart6: null,
  chart7: null,
  mapChart: null
};

// 获取子组件的ref
interface ChartExpose {
  initChart: (params: any) => ECharts;
}
const RealTimeAccessRef = ref<ChartExpose>();
const ArchivesClassRef = ref<ChartExpose>();
const UsePersonRef = ref<ChartExpose>();
const ArchiveRankRef = ref<ChartExpose>();
const BGQXStatisticRef = ref<ChartExpose>();
const OverNext30Ref = ref<ChartExpose>();
const HouseUseRef = ref<ChartExpose>();
const MapChartRef = ref<ChartExpose>();

// 初始化 charts参数
let ArchivesClassData = [
  {
    value: 171,
    name: "会计凭证",
    percentage: "15.31%"
  },
  {
    value: 57,
    name: "党务综合",
    percentage: "5.1%"
  },
  {
    value: 40,
    name: "传统立卷(文书档案)",
    percentage: "3.58%"
  },
  {
    value: 71,
    name: "档案分类",
    percentage: "6.36%"
  },
  {
    value: 65,
    name: "经营决策",
    percentage: "5.82%"
  },
  {
    value: 68,
    name: "项目合同",
    percentage: "6.09%"
  },
  {
    value: 645,
    name: "人事档案",
    percentage: "57.74%"
  }
];
let ArchiveRankData = [
  {
    value: 79999,
    name: "XXX能源",
    percentage: "80%",
    maxValue: 100000
  },
  {
    value: 59999,
    name: "维森集团",
    percentage: "60%",
    maxValue: 100000
  },
  {
    value: 49999,
    name: "维森网络集团有限公司",
    percentage: "50%",
    maxValue: 100000
  },
  {
    value: 39999,
    name: "维森教育学院",
    percentage: "40%",
    maxValue: 100000
  },
  {
    value: 29999,
    name: "维森银行总行",
    percentage: "30%",
    maxValue: 100000
  }
];
let HouseUseData = [
  {
    value: 12837,
    name: "空闲",
    percentage: "97.77%"
  },
  {
    value: 293,
    name: "占用",
    percentage: "2.23%"
  }
];
let annualData = [
  {
    label: new Date().getFullYear() - 2 + "年",
    value: ["184", "90", "120", "0", "30", "100", "80", "40", "20", "510", "350", "180"]
  },
  {
    label: new Date().getFullYear() - 1 + "年",
    value: ["118", "509", "366", "162", "380", "123", "321", "158", "352", "474", "154", "22"]
  },
  {
    label: new Date().getFullYear() + "年",
    value: ["548", "259", "113", "90", "69", "512", "23", "49", "28", "420", "313", "156"]
  }
];
let mapData = [
  {
    fromName: "北京",
    toName: "上海",
    coords: [
      [116.4551, 40.2539],
      [121.4648, 31.2891]
    ]
  },
  {
    fromName: "上海",
    toName: "北京",
    coords: [
      [121.4648, 31.2891],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "北京",
    toName: "广州",
    coords: [
      [116.4551, 40.2539],
      [113.5107, 23.2196]
    ]
  },
  {
    fromName: "广州",
    toName: "北京",
    coords: [
      [113.5107, 23.2196],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "北京",
    toName: "成都",
    coords: [
      [116.4551, 40.2539],
      [103.9526, 30.7617]
    ]
  },
  {
    fromName: "成都",
    toName: "北京",
    coords: [
      [103.9526, 30.7617],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "成都",
    toName: "新疆维吾尔自治区",
    coords: [
      [103.9526, 30.7617],
      [85.294711, 41.371801]
    ]
  },
  {
    fromName: " 新疆维吾尔自治区",
    toName: "成都",
    coords: [
      [85.294711, 41.371801],
      [103.9526, 30.7617]
    ]
  }
];
let BGQXStatisticData = [
  { name: "长期", value: 45 },
  { name: "短期", value: 28 },
  { name: "10年", value: 68 },
  { name: "永久", value: 811 },
  { name: "30年", value: 341 }
];

// 初始化 echarts
const initCharts = (): void => {
  dataScreen.chart1 = RealTimeAccessRef.value?.initChart(0.5) as ECharts;
  dataScreen.chart2 = ArchivesClassRef.value?.initChart(ArchivesClassData) as ECharts;
  dataScreen.chart3 = UsePersonRef.value?.initChart({
    data: annualData,
    unit: annualData.map(val => val.label),
    columns: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    colors: ["#FFA600", "#007AFE", "#FF4B7A"]
  }) as ECharts;
  dataScreen.chart4 = ArchiveRankRef.value?.initChart({
    data: ArchiveRankData,
    colors: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
  }) as ECharts;
  dataScreen.chart5 = BGQXStatisticRef.value?.initChart(BGQXStatisticData) as ECharts;
  dataScreen.chart6 = OverNext30Ref.value?.initChart({
    unit: ["访问量"],
    data: new Array(30).fill("").map(val => {
      val = randomNum(1, 20000);
      return val;
    })
  }) as ECharts;
  dataScreen.chart7 = HouseUseRef.value?.initChart(HouseUseData) as ECharts;
  dataScreen.mapChart = MapChartRef.value?.initChart() as ECharts;
};

// 获取当前时间
const { nowTime } = useTime();
let timer: NodeJS.Timer | null = null;
let time: Ref<string> = ref(nowTime.value);
timer = setInterval(() => {
  time.value = useTime().nowTime.value;
}, 1000);

// 销毁时触发
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer!);
  Object.values(dataScreen).forEach(val => val?.dispose());
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
